<template>
    <div style="margin-top: 15px;" id="app">
        <el-input  placeholder="请输入内容" v-model="input4" class="input-with-select">
            <el-select v-model="select" slot="prepend" placeholder="请选择">
                <el-option label="编号" value="1"></el-option>
                <el-option label="姓名" value="2"></el-option>
                <el-option label="月份" value="3"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search" v-on:click="profitFind(input4)" >查询</el-button>
        </el-input>
        <el-table
                v-loading="loading"
                :data="tableData"
                @selection-change="handleSelectionChange"
                style="width: 100%">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="id"
                    label="编号"
                    sortable
                    width="90">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="90">
            </el-table-column>
            <el-table-column
                    prop="date"
                    label="月份"
                    width="90">
            </el-table-column>
            <el-table-column
                    prop="profit"
                    label="业绩"
                    width="90">
            </el-table-column>
            <el-table-column align="right" width="80">
                <template slot="header">
                    <el-button type="primary" @click="save=true" size="mini" plain>添加</el-button>
                </template>
            </el-table-column>
            <el-table-column align="right" width="180">
                <template slot="header">
                    <el-button type="primary" @click="setExcel=true" size="mini" plain>导出为excel文件</el-button>
                </template>
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" plain @click="edit=true,getForm(scope.row.id)" v-if="scope.row">修改</el-button>
                    <el-button size="mini" type="danger" plain @click="deleteProfit(scope.row)" v-if="scope.row">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                style="margin: 15px 0px;"
                prev-text="上一页" next-text="下一页" background
                layout="prev, pager, next, sizes, jumper, total"
                :page-sizes="[5,10,20,40]"
                :page-size="pageSize"
                :total="total"
                :current-page="pageNow"
                @current-change="findPage"
                @size-change="findSize">
        </el-pagination>
        <el-dialog title="员工业绩列表" :visible.sync="list" width="80%">
            <el-table
                    :data="findList"
                    style="width: 100%;">
                <el-table-column
                        prop="id"
                        label="编号"
                        width="90">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名"
                        width="90">
                </el-table-column>
                <el-table-column
                        prop="date"
                        label="月份"
                        width="90">
                </el-table-column>
                <el-table-column
                        prop="profit"
                        label="业绩"
                        width="90">
                </el-table-column>
                <el-table-column
                        label="修改"
                        width="100">
                    <template slot-scope="scope">
                        <el-button type="warning" plain @click="edit=true,getForm(scope.row.id)" v-if="scope.row">修改</el-button>
                    </template>
                </el-table-column>
                <el-table-column
                        label="删除"
                        width="100">
                    <template slot-scope="scope">
                        <el-button type="danger" plain @click="deleteProfit(scope.row)" v-if="scope.row">删除</el-button>
                    </template >
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
            <el-button @click="list = false">确定</el-button>
          </span>
        </el-dialog>
        <el-dialog title="修改业绩信息" :visible.sync="edit" width="30%">
            <el-form  ref="editForm"  label-width="80px":model="eform" :rules="editRules">
                <el-form-item label="编号">
                    <el-input v-model="eform.id" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="eform.name"></el-input>
                </el-form-item>
                <el-form-item prop="date" label="月份:">
                    <el-date-picker
                            v-model="eform.date"
                            type="month"
                            placeholder="选择月">
                    </el-date-picker>
                </el-form-item>
                <!-- 业绩-->
                <el-form-item prop="profit" label="业绩:">
                    <el-input v-model="eform.profit" ></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="edit = false">取 消</el-button>
                <el-button type="primary" @click="edit = false,updateProfit('editForm')">确 定</el-button>
          </span>
        </el-dialog>
        <el-dialog title="添加业绩信息" :visible.sync="save" width="30%">
            <el-form  ref="sForm"  label-width="80px" :model="saveForm" :rules="saveRules">
                <el-form-item label="编号" prop="id">
                    <el-input v-model="saveForm.id" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="saveForm.name"></el-input>
                </el-form-item>
                <el-form-item prop="date" label="月份:">
                    <el-date-picker
                            v-model="saveForm.date"
                            type="month"
                            placeholder="选择月">
                    </el-date-picker>
                </el-form-item>
                <!-- 业绩-->
                <el-form-item prop="profit" label="业绩:">
                    <el-input v-model="saveForm.profit" ></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="save = false">取 消</el-button>
            <el-button type="primary" @click="save = false,saveProfit()">确 定</el-button>
          </span>
        </el-dialog>
        <el-dialog title="导出为excel文件" :visible.sync="setExcel" width="30%">
            <el-form ref="form"  label-width="120px">
                <el-form-item label="导出文件夹路径">
                    <el-input v-model="form.path"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="setExcel = false">取 消</el-button>
            <el-button type="primary" @click="setExcel = false,excel(form.path)">确 定</el-button>
          </span>
        </el-dialog>
    </div>

</template>

<script>
    var list = [];
    export function validateAccountNumber(str) {
        const reg = /^([1-9]{1})$/
        return reg.test(str)
    }
    export default {
        methods:{
            saveProfit(){
                var date1=(String)(this.saveForm.date.getFullYear())+"-"+
                    (String)(this.saveForm.date.getMonth()+1);
                this.saveForm.date=date1;
                const _this = this
                this.$http.post("profit/save",_this.saveForm).then(function(resp){
                    if(resp.data.code==2000){
                        _this.$message.success('添加成功')
                        location.reload();
                    }
                })
            },
            excel(path){
                const _this = this
                path=path+"/profit.xls"
                console.log(path)
                this.$http.post("profit/exportExcel",path).then(function(resp){
                    console.log(resp.data)
                    if(resp.data.code!=2000){
                        _this.$message.error(resp.data.msg);
                    }else{
                        _this.$message.success("导出成功");
                    }
                })
            },
            findPage(page){
                console.log("当前页数："+page);
                this.pageNow=page;
                this.findAllTableDataByPage();
            },
            findSize(size){
                console.log("当前页面记录条数："+size);
                this.pageSize=size;
                this.findAllTableDataByPage();
            },
            findAllTableDataByPage(){
                this.$http.get("profit/findByPage?pageNow="+this.pageNow+ "&pageSize=" + this.pageSize).then((res)=>{
                    // console.log(res.data);
                    this.tableData=res.data.salaries;
                    this.total=res.data.total;
                });
            },
            handleSelectionChange(val){
                console.log("handleSelectionChange--",val)
                this.tableChecked=val
            },
            getForm(id) {
                const _this = this
                this.$http.post("profit/findOne", id).then(function (resp) {
                    _this.eform = resp.data.data[0]
                })
            },
            profitFind(input){
                const _this = this
                if(input!==null&&input!==''&&this.select=="1"){
                    this.$http.post("profit/findOne",input).then(function(resp){
                        console.log(resp.data.data);
                        _this.tableData=resp.data.data
                    })
                }else if(input!==null&&input!==''&&this.select=="2"){
                    this.$http.post("profit/findByName",input).then(function(resp){
                        console.log(resp.data);
                        _this.tableData=resp.data.data
                    })
                }else if(input!==null&&input!==''&&this.select=="3") {
                    this.$http.post("profit/findByDate", input).then(function (resp) {
                        console.log(resp.data);
                        _this.tableData = resp.data.data
                    })
                }else{
                    this.$http.post("profit/findAll").then(function(resp){
                        console.log(resp.data.data);
                        _this.tableData=resp.data.data
                    })
                }
            },
            updateProfit(fromName){
                 this.eform.date=(String)(this.eform.date.getFullYear())+"-"+
                    (String)(this.eform.date.getMonth()+1);
                this.$refs[fromName].validate(valid => {
                    if (valid) {
                        const _this = this
                        this.$http.post("profit/update",this.eform).then(function(resp){
                            if (resp.data.code==2000)  _this.$message.success("修改成功")
                            location.reload();
                        });
                    } else {
                        this.$message.error("信息填写错误")
                    }
                })
            },
            deleteProfit(row){
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.post("profit/delete",row.id)
                    location.reload();
                    this.$message({
                            type: 'success',
                            message: '删除成功!'
                        }
                    );
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
                const _this = this
                this.$http.post("profit/findLastId").then(function(resp){
                    _this.saveForm.id=resp.data.data+1
                })
            },
        },
        data() {
            let num = /^(0|\+?[1-9][0-9]*)$/;
            let isNum = (rule, value, callback) => {
                if (!num.test(value)) {
                    return callback(new Error('格式错误'))
                } else {
                    callback()
                }
            };
            let percent = /^(?:[1-9]?\d|100)$/;
            let isPercent = (rule, value, callback) => {
                if (!percent.test(value)) {
                    return callback(new Error('请输入0-12的整数'))
                } else {
                    callback()
                }
            };
            var list=[];
            for(let i=0;i<20;i++){
                list[i]={
                    value: null,
                    label: null,
                }
            }
            return {
                setExcel:false,
                getExcel:false,
                loading: false,
                total:0,//总页数，从后台查询
                pageNow:1,//当前页数，默认为1
                pageSize:20,//当前页显示的数据条数，默认为20
                options: list,
                input4:null,
                select: '请选择',
                tableData: null,
                findList:null,
                list:false,
                edit:false,
                save:false,
                form:[
                    {
                        path:'',
                    }
                ],
                eform:[],
                saveForm:{
                    id:'',
                    name:'',
                    date:'',
                    profit:'',
                },
                saveRules:{},
                editRules:{
                    name:[
                        //必填项
                        { required: true,message: "请输入员工姓名",trigger: "change"},
                        { min: 2, max: 30, message: "长度在 2 到 10 个字符", trigger: "change" },
                    ],
                    profit:[
                        { required: true,message: "请输业绩",trigger: "change"},
                        { min:1, max: 11, message: "长度在 1到 11 位", trigger: "change" },
                        {validator:isNum}
                    ],

                }
            }
        },
        created(){
            const _this = this
            _this.findAllTableDataByPage();
            this.$http.post("profit/findLastId").then(function(resp){
                _this.saveForm.id=resp.data.data+1
            })

        }
    }
</script>
<style>
    .el-select .el-input {
        width: 130px;
    }
    .input-with-select .el-input-group__prepend {
        background-color: #fff;
    }
    .page{
        float: right;
    }
</style>